<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>阶跃动画</title>
		<style>
			
			* {
				padding: 0;
				margin: 0;
			}

			p {
				/* 字体大小 */
				font-size: 50px;

				/* 字体粗细 */
				font-weight: bolder;

				/* 字体颜色 */
				color: red;

				/* 不让p标签换行 */
				white-space: nowrap;

				/*background-color: blue;*/
				
				/* 溢出隐藏 */
				overflow: hidden;
				
				/* 右边框 */
				border-right: 5px solid blue;

				/* 
					动画 
					steps: 阶跃函数;
					第一个参数: 每两帧动画之间的步数;
					第二个参数: start表示在每个时间段的开始时发生阶跃, end是默认值, 在每个时间段的结束时发生阶跃;
				*/
				animation: changeWidth 10s steps(10, end) forwards,
							cursor .3s ease 0s infinite;
			}

			@keyframes changeWidth {
				from {
					width: 0em;
				}

				50% {
					width: 5em;
				}

				to {
					width: 10em;
				}
			}

			@keyframes cursor {
				50% {
					border: none;
				}
			}

		</style>
	</head>
	<body>
		
		<p>欢迎大家跟着歪哥学习</p>

		
	</body>
</html>